<template>
	<div class="MULTIPLE_CHOICE_INPUT">
		<div class="title">
			<view>请选择(可多选)</view>
			<view>
				<button @click="commitData" size="mini" plain class="btn">确定</button>
			</view>
		</div>
		<template v-show="message">
						<div class="questionText" v-if="!$attrs.hideQuestion">{{ message.questionText }}</div>
			<div class="handler_area">
				<template v-for="(item, index) in answers">
					<view :key="index" :class="['btn', item.selected ? 'selected' : '']">
						<button :type="item.selected ? 'primary' : 'default'" @click="select(index, item)" size="mini" plain>
							{{ item.answerText }}
						</button>
					</view>
				</template>
			</div>
			<view class="input-area" v-show="showTextarea()">
				<textarea  maxlength="20" class="text-area" placeholder="请补充说明，限20字以内" v-model="otherAnswer"></textarea>
			</view>
		</template>
	</div>
</template>
<script>
import { deepCopy } from './utils';

export default {
	data() {
		return {
			answers: [],
			message: null,
			otherAnswer: '',
		};
	},
	methods: {
		input(e) {
			console.log(e);
		},
		start(message) {
			Object.assign(this.$data, this.$options.data());
			this.message = message;
			this.answers = deepCopy(this.message.answers).map(v => {
				v.selected = false;
				return v;
			});
		},
		showTextarea() {
			const { answers } = this;
			return answers.some(v => v.answerCode === 'other' && v.selected);
		},
		commitData() {
			const { answers, otherAnswer } = this;
			const ans = deepCopy(answers);
			const selected = ans
				.filter(i => {
					if (i.selected == true) {
						return true;
					}
				})
				.map(el => {
					if (el.answerCode == 'other') {
						el.answerText = otherAnswer;
					}
					return el;
				});
			if (selected.length > 0) {
				const { advisoryId, questionCode, questionFromSource } = deepCopy(this.message);
				const data = {
					advisoryId,
					answers: selected,
					questionCode,
					questionFromSource,
				};
				this.$emit('submit', data);
			}

			// advisoryId: "6641514294109"
			// answers: [{answerCode: "no", answerText: "有", isMonopolySingle: true, selected: true}]
			// questionCode: "5282000"
			// questionFromSource: "ADVISORY"
		},
		select(index, item) {
			const { answerCode, answerText, selected } = item;
			const { answers } = this;
			if (answerCode === 'no') {
				!selected && this.answers.map(i => (i.selected = false));
			} else {
				!selected && this.answers.filter(i => i.answerCode === 'no').map(i => (i.selected = false));
			}
			['no', 'other'].includes(answerCode) && (this.otherAnswer = '');
			item.selected = !selected;
			console.log(this.answers);
			// this.answers = answers;
			// advisoryId: "6641514294109"
			// answers: [{answerCode: "no", answerText: "有", isMonopolySingle: true, selected: true}]
			// questionCode: "5282000"
			// questionFromSource: "ADVISORY"

			// this.$emit('submit', data);
			// answers.map(i => (i.selected = false));
		},
	},
};
</script>
<style lang="scss" scoped>
.title {
	width: 100%;
	height: 48px;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
	box-sizing: border-box;
	.info {
		color: #999;
	}
}
.questionText {
	font-size: 14px;
	padding: 15px;
}

.handler_area {
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 0;
	justify-content: flex-start;
	.btn {
		margin-right: 12px;
		margin-bottom: 12px;
		&:nth-last-child(1) {
			margin-right: 0;
		}
		button {
			border-radius: 4px;
			font-size: 14px;
			background: #f7f8fa;
			//border-color: #f7f8fa;
			border: 1px solid #f7f8fa;
			color: #1e8dff;
			//width: 110px;
			padding: 0 20px;
		}
	}
	.selected {
		button {
			border: 1px solid #1e8dff;
			background: #ebf8ff;
		}
	}
}
.input-area{
  padding: 12px;
}
.text-area{
  background: #eee;
  box-sizing: border-box;
  width: 100%;
}
</style>
